<template>
  <view class="login-wrap">
    <view class="login-wrap-bg">
      <image
        :src="imgBaseUrlV2 + 'login_bg_top.png'"
        class="login-wrap-bg__top"
        mode="widthFix"
      ></image>
      <image
        :src="imgBaseUrlV2 + 'login_bg_bottom.png'"
        class="login-wrap-bg__bottom"
        mode="widthFix"
      ></image>
    </view>

    <view class="login-wrap-box">
      <view class="login-wrap-head" v-if="showHead">
        <view class="login-wrap-head__desc">
          <image
            :src="imgBaseUrlV1 + 'RHWS logo1_1.png'"
            class="login-wrap-head__logo"
            mode="widthFix"
          ></image>
          <text class="login-wrap-head__desc-text">润滑卫士</text>
        </view>
      </view>
      <slot> </slot>
    </view>

    <view class="login-wrap-tips">
      <checkbox-group @change="radioChange">
        <label class="radio">
          <checkbox
            style="transform: scale(0.7)"
            value="1"
            :checked="isCheck"
          />
          <text>未注册手机号码登录后自动注册，且代表您已阅读并同意</text>
          <text
            class="btn btn-text btn-primary login-wrap-tips-btn"
            @click="onClickAgreement"
            >《用户协议》</text
          >
          以及
          <text
            class="btn btn-text btn-primary login-wrap-tips-btn"
            @click="onClickPrivacy"
            >《隐私政策》</text
          >
        </label>
      </checkbox-group>
    </view>
  </view>
</template>

<script>
import { imgBaseUrlV2, imgBaseUrlV1 } from "@/common/config/index";
export default {
  props: {
    showHead: {
      default: true,
    },
  },
  data() {
    return {
      isCheck: false,
      imgBaseUrlV1,
      imgBaseUrlV2,
    };
  },
  methods: {
    radioChange() {
      this.isCheck = !this.isCheck;
      // console.log(this.isCheck,'1212')
      this.$emit("changeRadio", this.isCheck);
    },
    onClickAgreement() {
      this.$Router.push("/pageA/service-agreement/service-agreement");
    },
    onClickPrivacy() {
      this.$Router.push("/pageA/service-agreement/service-agreement");
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/variable';

.login-wrap {
  position: relative;
  display: flex;
  z-index: 1;
  flex-direction: row;
  height: 100%;
  /* #ifndef rn */
  min-height: 100vh;
  /* #endif */
  background: linear-gradient(180deg, #0d1523 0%, #102945 100%);

  .login-wrap-box {
	color:#fff;
  }

  &-bg {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;

    &__top {
      position: absolute;
      top: 0;
      right: 0;
      width: 536rpx;
      height: auto;
    }

    &__bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 328rpx;
      height: auto;
    }
  }

  &-box {
    position: relative;
    z-index: 3;
    width: 100%;
    /* #ifndef rn */
    min-height: 100vh;
    /* #endif */
    padding-bottom: 200rpx;
  }

  &-tips {
    position: absolute;
    z-index: 4;
    width: 100%;
    bottom: 100rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: color-desc;
    padding: 0 64rpx;
    text-align: center;

    &-btn {
      font-size: 24rpx;
      color: color-active;
      /* #ifndef rn */
      line-height: inherit;
      /* #endif */
    }
  }

  &-head {
    padding: 314rpx 62rpx 156rpx;

    &__title {
      &-text {
        color: color-default;
        font-size: 56rpx;
        font-family: PingFangSC-Regular;
        font-weight: 700;
      }
    }

    &__desc {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: 50rpx;
      justify-content: center;

      &-text {
        font-size: 56rpx;
        font-family: PingFangSC-Regular;
        font-weight: 700;
      }
    }

    &__logo {
      width: 100rpx;
      height: auto;
      margin-right: 18rpx;
    }
  }
}
</style>
